<template>
  <div class="data-analysis-container">
    <el-row :gutter="20" class="mb-4">
      <el-col :span="24">
        <h1 class="page-title">房价数据分析</h1>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mb-4">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>选择城市</span>
            </div>
          </template>
          <div class="city-selector">
            <el-select v-model="selectedCity" placeholder="请选择城市" @change="handleCityChange" :loading="citiesLoading">
              <el-option
                v-for="city in availableCities"
                :key="city"
                :label="city"
                :value="city"
              />
            </el-select>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <div v-else-if="!selectedCity" class="empty-state">
      <el-empty description="请选择一个城市查看分析数据" />
    </div>

    <template v-else>
      <!-- 城市概览 -->
      <el-row :gutter="20" class="mb-4">
        <el-col :span="24">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>{{ selectedCity }}房价概览</span>
              </div>
            </template>
            <div v-if="cityStats" class="city-overview">
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-title">平均价格</div>
                    <div class="stat-value">{{ formatNumber(cityStats.avgPrice) }} 万元</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-title">最高价格</div>
                    <div class="stat-value">{{ formatNumber(cityStats.maxPrice) }} 万元</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-title">最低价格</div>
                    <div class="stat-value">{{ formatNumber(cityStats.minPrice) }} 万元</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-title">房源数量</div>
                    <div class="stat-value">{{ formatNumber(cityStats.totalHouses) }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 价格分布 -->
      <el-row :gutter="20" class="mb-4">
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>价格分布</span>
              </div>
            </template>
            <div class="chart-container">
              <PriceDistributionChart :city="selectedCity" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>面积分布</span>
              </div>
            </template>
            <div class="chart-container">
              <AreaDistributionChart :city="selectedCity" />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 户型和装修分布 -->
      <el-row :gutter="20" class="mb-4">
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>户型分布</span>
              </div>
            </template>
            <div class="chart-container">
              <LayoutDistributionChart :city="selectedCity" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>装修分布</span>
              </div>
            </template>
            <div class="chart-container">
              <DecorationDistributionChart :city="selectedCity" />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 价格-面积散点图 -->
      <el-row :gutter="20" class="mb-4">
        <el-col :span="24">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>价格-面积关系</span>
              </div>
            </template>
            <div class="chart-container large">
              <PriceAreaScatterChart :city="selectedCity" />
            </div>
          </el-card>
        </el-col>
      </el-row>

  
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useAnalysisStore } from '@/stores/analysisStore'
import { useHouseStore } from '@/stores/houseStore'
import PriceDistributionChart from '@/components/charts/PriceDistributionChart.vue'
import AreaDistributionChart from '@/components/charts/AreaDistributionChart.vue'
import LayoutDistributionChart from '@/components/charts/LayoutDistributionChart.vue'
import DecorationDistributionChart from '@/components/charts/DecorationDistributionChart.vue'
import PriceAreaScatterChart from '@/components/charts/PriceAreaScatterChart.vue'
import DistrictAnalysisTable from '@/components/DistrictAnalysisTable.vue'

const analysisStore = useAnalysisStore()
const houseStore = useHouseStore()
const selectedCity = ref('')
const loading = ref(false)
const citiesLoading = ref(false)
const cityStats = ref(null)
const availableCities = ref([])

// 格式化数字显示
const formatNumber = (num) => {
  return num ? Number(num).toLocaleString() : '0'
}

// 获取城市列表
const fetchCities = async () => {
  citiesLoading.value = true
  try {
    const cities = await houseStore.fetchCities()
    availableCities.value = cities || []
    // 如果有城市数据且尚未选择城市，自动选择第一个
    if (availableCities.value.length > 0 && !selectedCity.value) {
      selectedCity.value = availableCities.value[0]
      handleCityChange(selectedCity.value)
    }
  } catch (error) {
    console.error('获取城市列表失败:', error)
  } finally {
    citiesLoading.value = false
  }
}

const handleCityChange = async (city) => {
  if (!city) return
  
  loading.value = true
  try {
    cityStats.value = await analysisStore.fetchCityStatistics(city)
  } catch (error) {
    console.error('获取城市数据失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  // 加载城市列表
  await fetchCities()
  
  // 加载系统统计数据
  try {
    await analysisStore.fetchSystemStatistics()
  } catch (error) {
    console.error('获取系统统计数据失败:', error)
  }
})

// 清理资源
onUnmounted(() => {
  // 清理相关资源
  cityStats.value = null
})
</script>

<style scoped>
.data-analysis-container {
  padding: 20px;
}

.page-title {
  margin-bottom: 20px;
  color: var(--el-text-color-primary);
}

.mb-4 {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.city-selector {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.city-overview {
  padding: 10px 0;
}

.stat-card {
  background-color: var(--el-fill-color-light);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-title {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-color-primary);
}

.loading-container {
  padding: 40px;
}

.empty-state {
  padding: 60px 0;
  display: flex;
  justify-content: center;
}

.chart-container {
  height: 300px;
  width: 100%;
}

.chart-container.large {
  height: 400px;
}

.district-analysis {
  margin-top: 10px;
}
</style> 